<template>
  <div>
    <el-steps :active="2" align-center>
      <el-step title="选择影片场次"></el-step>
      <el-step title="选择座位"></el-step>
      <el-step title="15分钟内付款"></el-step>
      <el-step title="影院取票观影"></el-step>
    </el-steps>
    <div class="whole">
      <div class="left">
        <div class="seat-example">
          <span class="seat" :class="isSelected[0]"></span>
          <span style="margin: 0 20px">可选座位</span>
          <span class="seat" :class="isSelected[3]"></span>
          <span style="margin: 0 20px">已售座位</span>
          <span class="seat" :class="isSelected[2]"></span>
          <span style="margin: 0 20px">已选座位</span>
        </div>

        <div class="screen">银幕中央</div>

        <div class="seat-content">
          <div class="row" v-for="(value, key) in seats" :key="key">
            <span style="width: 10px; margin-right: 50px">{{ key }}</span>
            <div style="display: flex; justify-content: flex-end">
              <span
                class="seat"
                :class="isSelected[seats[key][index]]"
                @click="pressSeat(key, index)"
                v-for="(item, index) in value"
                :key="item"
              ></span>
            </div>
          </div>
        </div>
      </div>

      <div class="right">
        <div class="right-content">
          <div class="right-header">
            <div class="poster">
              <img :src="lamination.movie.image" alt="" />
            </div>
            <div class="movie-info">
              <p style="font-size: 20px; font-weight: 700">
                {{ lamination.movie.nameCn }}
              </p>
              <span>
                类型：{{ lamination.movie.categoryNameList.join("/") }}
              </span>
              <span>时长：{{ lamination.movie.time }}分钟</span>
            </div>
          </div>
          <div class="right-content">
            <div class="info-item">
              <span>影院：</span>
              <span>{{ lamination.cinema.name }}</span>
            </div>
            <div class="info-item">
              <span>影厅：</span>
              <span>{{ lamination.hall.name }}</span>
            </div>
            <div class="info-item">
              <span>版本：</span>
              <span>{{ lamination.langVersion }}</span>
            </div>
            <div class="info-item">
              <span>场次：</span>
              <span>
                {{ lamination.startDate }}
                {{ lamination.startTime }}
              </span>
            </div>
            <div class="info-item">
              <span>票价：</span>
              <span>￥{{ lamination.price }}/张</span>
            </div>
            <span style="color: #999">座位：</span>
            <div class="seat-chose" v-if="pickedSeats.length > 0">
              <span class="ticket" v-for="item in pickedSeats" :key="item">
                {{ item }}
              </span>
            </div>
            <div class="info-item" style="align-items: center">
              <span style="color: #333">总价：</span>
              <span style="font-size: 20px; color: #f03d37">
                ￥{{ lamination.price * pickedSeats.length }}
              </span>
            </div>
            <div style="text-align: center; margin-top: 30px">
              <el-button type="danger" round @click="saveOrder">
                提交订单
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ChooseSeat",
  data() {
    return {
      isSelected: {
        0: "seat-default",
        1: "seat-no",
        2: "seat-pick",
        3: "seat-sold",
      },
      seats: {},
      laminationId: this.$route.params.laminationId,
      lamination: {},
      pickedSeats: [],
      token: null,
    };
  },
  created() {
    this.getToken();
    this.getLamination();
  },
  methods: {
    getToken() {
      this.axios.get("/api/token").then(({ data }) => {
        if (data.code === 200) {
          this.token = data.data;
        } else {
          this.$notify.error({
            title: "失败",
            message: data.message,
          });
        }
      });
    },
    getLamination() {
      this.axios
        .get("/api/lamination/order", {
          params: {
            laminationId: this.laminationId,
          },
        })
        .then(({ data }) => {
          if (data.code === 200) {
            this.lamination = data.data;
            this.lamination.movie.categoryNameList = [];
            this.lamination.movie.categoryList.forEach((category) => {
              this.lamination.movie.categoryNameList.push(category.name);
            });
            this.seats = JSON.parse(this.lamination.seatJson);
          } else {
            this.$notify.error({
              title: "失败",
              message: data.message,
            });
          }
        });
    },
    saveOrder() {
      let params = {};
      params["userId"] = this.$store.state.userId;
      params["laminationId"] = this.laminationId;
      params["seats"] = JSON.stringify(this.pickedSeats);
      params["token"] = this.token;
      const that = this;
      that.axios.post("/api/order", params).then(({data}) => {
        if (data.code === 200) {
          that.$router.push("/order/" + data.data);
        } else {
          that.$notify.error({
            title: "失败",
            message: data.message,
          });
        }
      });
    },
    pressSeat(key, idx) {
      if (!this.$store.state.userId) {
        this.$store.state.loginDialog = true;
        return false;
      }
      let seat_str = key + "排" + (idx + 1) + "座";
      if (this.seats[key][idx] === 0) {
        if (this.pickedSeats.length === 5) {
          this.$alert("您最多选择五个座位", "提示", {
            confirmButtonText: "确定",
            type: "warning",
          }).catch((err) => err);
          return;
        }
        this.$set(this.seats[key], idx, 2);
        this.pickedSeats.push(seat_str);
      } else if (this.seats[key][idx] === 2) {
        this.$set(this.seats[key], idx, 0);
        this.pickedSeats.splice(this.pickedSeats.indexOf(seat_str), 1);
      }
    },
  },
};
</script>

<style scoped>
.el-step {
  margin: 40px auto;
}

.whole {
  width: 1200px;
  margin: 0 auto;
  border: 1px solid #e5e5e5;
  display: flex;
}

.left {
  width: 820px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #e5e5e5;
}

.right {
  width: 340px;
  background-color: #f9f9f9;
  padding: 20px;
}

.seat {
  display: inline-block;
  width: 30px;
  height: 26px;
  margin: 0 10px;
  background-position: 0 1px;
}

.seat-default {
  background: url("../../assets/sofa-unpick.png") no-repeat;
  background-size: cover;
}

.seat-empty {
  background: url("../../assets/sofa-empty.png") no-repeat;
  background-size: cover;
}

.seat-sold {
  background: url("../../assets/sofa-forbidden.png") no-repeat;
  background-size: cover;
}

.seat-pick {
  background: url("../../assets/sofa-pick.png") no-repeat;
  background-size: cover;
}

.seat-example {
  display: flex;
  align-items: center;
  margin: 20px 0 0 0;
}

.screen {
  width: 550px;
  padding-top: 50px;
  text-align: center;
  font-size: 16px;
  color: #666;
  background: url()
    no-repeat;
  background-position-x: center;
  position: relative;
  margin: 40px 0 40px 0;
}

.row {
  white-space: nowrap;
  margin-top: 10px;
  padding: 0 10px;
  text-align: center;
  display: flex;
}

.seat-content {
  margin-bottom: 40px;
  overflow-x: scroll;
  width: 90%;
  padding: 10px;
}

.poster {
  width: 115px;
  height: 158px;
}

.poster > img {
  width: 100%;
  height: 100%;
}

.right-header {
  display: flex;
}

.movie-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 20px;
}

.info-item {
  display: flex;
  margin: 15px 0;
  font-size: 14px;
}

.info-item :first-child {
  color: #999999;
}

.seat-chose {
  margin-top: 20px;
  margin-left: 42px;
  margin-bottom: 20px;
  position: relative;
  top: -5px;
}

.ticket {
  cursor: default;
  position: relative;
  font-size: 13px;
  color: #f03d37;
  display: inline-block;
  width: 60px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin: 0 12px 10px 0;
  background: url()
    no-repeat;
}
</style>
